<template>
  <div class="container">
    <el-scrollbar class="vedios">
      <div class="label-out">{{ $t("预警视频") }}</div>
      <div class="divider"></div>
      <el-date-picker
              style="width: 150px"
              v-model="videoDate"
              type="date"
              :placeholder="$t('选择日期')"
              @change="handleDateChange"
      />
      <div class="row">
        <div class="first">
          <div
                  class="content-wrapper green"
                  v-for="item in list?.slice(0, 1)"
                  :key="item.id"
          >
            <div class="border" @click="playVideo(item.videoUrl)">
              <img :src="item.videoCover" class="cover" />
              <el-icon class="play-btn"><VideoPlay /></el-icon>
            </div>
          </div>
        </div>
        <div class="second">
          <div
                  class="content-wrapper green"
                  v-for="item in list?.slice(1, 7)"
                  :key="item.id"
          >
            <div class="border" @click="playVideo(item.videoUrl)">
              <img :src="item.videoCover" class="cover" />
              <el-icon class="play-btn"><VideoPlay /></el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="vedio-list">
        <div
                class="content-wrapper green"
                v-for="item in list.slice(7)"
                :key="item.id"
        >
          <div class="border" @click="playVideo(item.videoUrl)">
            <img :src="item.videoCover" class="cover" />
            <el-icon class="play-btn"><VideoPlay /></el-icon>
          </div>
        </div>
      </div>
      <div class="pagination" v-if="total > 0">
        <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[100, 200, 300, 400]"
                :size="size"
                :disabled="disabled"
                :background="background"
                layout="prev, pager, next"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <span class="total">{{ $t("共") }}{{ total }}{{ $t("条") }}</span>
      </div>
    </el-scrollbar>
    <el-dialog v-model="isDialogVisible" :title="$t('视频详情')" width="60%" destroy-on-close>
      <video controls :src="videoUrl" class="video-player" autoplay></video>
    </el-dialog>
  </div>
</template>


<script>
import dayjs from 'dayjs';
import { VideoPlay } from '@element-plus/icons-vue';
import { getVideoPage } from '@/api/index';

export default {
  name: 'Vedio',
  components: {
    VideoPlay,
  },
  data() {
    return {
      videoDate: new Date(),
      list: [],
      total: null,
      currentPage: 1,
      pageSize: 22,
      size: 'default',
      disabled: false,
      background: true,
      isLoading: false,
      isDialogVisible: false,
      videoUrl: '',
    };
  },
  methods: {
    playVideo(url, item) {
      console.log(item)
      this.videoUrl = url;
      this.isDialogVisible = true;
    },
    async fetchData() {
      const params = {
        page: this.currentPage,
        count: this.pageSize,
        videoDate: dayjs(this.videoDate).format('YYYY-MM-DD')
      };

      try {
        const { data } = await getVideoPage(params);
        if (data.code === 0 && data.data) {
          this.list = data.data.records;
          this.total = +data.data.total; // 更新总数据条数
          this.pageSize = +data.data.size; // 设置每页条数
        } else {
          console.error('Error fetching videos:', response.data.msg);
        }
      } catch (error) {
        console.error('Error fetching videos:', error);
      }
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData(); // 每页条数变化时重新请求数据
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData(); // 翻页时重新请求数据
    },
    handleDateChange() {
      this.currentPage = 1; // 重置页码为第一页
      this.fetchData(); // 重新请求数据
    },
  },
  created() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: calc(100% - 60px);
  background: #181818;
  box-shadow: 12px 12px 30px 0px rgba(40, 58, 44, 0.08);
  border-radius: 32px 32px 32px 32px;
  overflow: hidden;

  .vedios {
    padding: 20px 25px;

    .label-out {
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
      line-height: 60px;
      margin-bottom: 20px;
    }

    .divider {
      width: 100%;
      height: 1px;
      border-bottom: 1px solid #3b3b3b;
      margin-bottom: 26px;
    }

    .content-wrapper {
      float: left;
      box-shadow: 20px 20px 30px 0px rgba(0, 0, 0, 0.65);
      margin-bottom: 20px;
      height: 158px;
      position: relative;
      border-radius: 32px;

      .border {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 1px solid transparent;
        border-radius: 32px;
        box-sizing: border-box;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        cursor: pointer;
        transition: 0.6s ease;
        background-size: 100% 100%;
        .cover {
          width: 100%;
          height: 100%;
          border-radius: 32px;
        }
      }

      &:hover {
        .border {
          background-size: 100% 300%;
        }
      }
    }

    .green {
      .border {
        background-image: linear-gradient(24deg, #000 55%, rgb(31, 52, 45)),
          linear-gradient(24deg, #000 55%, #1fd267);
      }
    }

    .vedio-list {
      @include clear;
      width: 100%;

      .content-wrapper {
        width: calc(92% / 5);
        margin-right: 2%;

        &:nth-of-type(5n) {
          margin-right: 0;
        }
      }
    }

    .row {
      @include clear;
      width: 100%;
      margin-top: 20px;

      .first {
        float: left;
        margin-right: 2%;
        width: calc(92% / 5 * 2 + 2%);
        .content-wrapper {
          width: 100%;
          height: 336px;
        }
      }

      .second {
        float: left;
        width: calc(100% - (92% / 5 * 2 + 2%) - 2%);
        .content-wrapper {
          margin-right: 2%;
          float: left;
          width: calc(96% / 3);
          &:nth-of-type(3n) {
            margin-right: 0;
          }
        }
      }
    }
  }

  .play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 45px;
    color: #fff;
  }
  .video-player {
    width: 100%;
    height: 100%;
  }
}
</style>
